<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index</title>
    <link rel="stylesheet" href="../libs/bootstrap/css/bootstrap.min.css">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
</head>
<body ng-app="myApp" ng-controller="MyController">
<div class="container">
    <form name="myForm" class="form-horizontal">
            <div class="form-group" ng-class="{'has-error': myForm.userName.$dirty&&myForm.userName.$invalid,'has-success':myForm.userName.$valid}">
                <label class="control-label col-sm-2">用户名</label>
                <div class="col-sm-8">
                    <input type="text" class="form-control" name="userName" ng-required="true" ng-model="user.name" ng-minlength="5" ng-maxlength="10">
                </div>
                <div class="col-sm-2 form-control-static">
                    <label class="label alert-info alert-danger" ng-if="myForm.userName.$error.required&&myForm.userName.$dirty"><span class="glyphicon glyphicon-warning-sign" aria-hidden="true"></span> 内容不能为空</label>
                    <label class="label alert-info alert-danger" ng-if="myForm.userName.$error.minlength"><span class="glyphicon glyphicon-warning-sign" aria-hidden="true"></span> 最小长度5</label>
                    <label class="label alert-info alert-danger" ng-if="myForm.userName.$error.maxlength"><span class="glyphicon glyphicon-warning-sign" aria-hidden="true"></span> 最大长度10</label>
                    <label class="label alert-info alert-success" ng-if="!myForm.userName.$error.maxlength&&!myForm.userName.$error.minlength&&!myForm.userName.$error.required"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span> 验证成功</label>
                </div>
            </div>


        <div class="form-group" ng-class="{'has-error': myForm.userPass.$dirty&&myForm.userPass.$invalid,'has-success':myForm.userPass.$valid}">
            <label class="control-label col-sm-2">密 码</label>
            <div class="col-sm-8">
                <input type="password" class="form-control" name="userPass" ng-required="true" ng-model="user.pass" ng-minlength="5" ng-maxlength="10">
            </div>
            <div class="col-sm-2 form-control-static">
                <label class="label alert-info alert-danger" ng-if="myForm.userPass.$error.required&&myForm.userPass.$dirty"><span class="glyphicon glyphicon-warning-sign" aria-hidden="true"></span> 内容不能为空</label>
                <label class="label alert-info alert-danger" ng-if="myForm.userPass.$error.minlength"><span class="glyphicon glyphicon-warning-sign" aria-hidden="true"></span> 最小长度5</label>
                <label class="label alert-info alert-danger" ng-if="myForm.userPass.$error.maxlength"><span class="glyphicon glyphicon-warning-sign" aria-hidden="true"></span> 最大长度10</label>
                <label class="label alert-info alert-success" ng-if="!myForm.userPass.$error.maxlength&&!myForm.userPass.$error.minlength&&!myForm.userPass.$error.required"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span> 验证成功</label>
            </div>
        </div>
    </form>
</div>
</body>
</html>

<script src="../libs/angular.js"></script>
<script src="../libs/jquery3_1_1.min.js"></script>
<script src="js/index.js"></script>